:host {
  display: flex;
  flex-direction: row;
  background-color: rgba(29, 31, 26, 0.82);

  .left {
    width: 50%;
  }

  .right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .drop {
      width: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #3A6C87;
      border-radius: 0.18vw;
      border: white 0.045vw solid;

      a {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;

        .date {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 0.09vw;
          width: 80%;
        }

        .icon {
          margin-left: 0.2vw;
        }
      }
    }

    .carb-container {
      display: flex;
      flex-direction: column;
      width: 60%;
      margin-top: 0.27vw; /* 0.3vw * 0.9 */

      .carb-items {
        display: flex;
        flex-direction: column;
        background-color: #16384F;
        align-items: center;
        margin-top: 0.135vw; /* 0.3vw * 0.9 */
        margin-bottom: 0.135vw; /* 0.3vw * 0.9 */
        border-radius: 0.18vw; /* 0.2vw * 0.9 */
        border: #797979 0.045vw solid; /* 0.05vw * 0.9 */

        .top {
          margin-top: 0.09vw; /* 0.1vw * 0.9 */
          font-size: 0.6vw; /* 0.8vw * 0.9 */
          color: white;
        }

        .line {
          height: 0.09vw; /* 0.1vw * 0.9 */
          width: 70%; /* 8.5vw * 0.9 */
          margin-top: 0.27vw; /* 0.3vw * 0.9 */
          background-color: #226A80;
        }

        .bottom {
          margin-bottom: 0.09vw; /* 0.1vw * 0.9 */
          font-size: 0.6vw; /* 1vw * 0.9 */
          color: #F59A23;
        }
      }
    }
  }
}
